<template>
  <div id="counts" @click="addCount">
    <h1>count: {{ count }}</h1>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
const count = ref(1)
const addCount = async() => {
  count.value++ // 数据更新(异步的)
  console.log(document.getElementById('counts').innerText)
  // 方法一
  // nextTick(() => {
  //   console.log('DOM已经更新了')
  //   console.log(document.getElementById('counts').innerText)
  // })
  // 方法二
  await nextTick()
  console.log('DOM已经更新了')
  console.log(document.getElementById('counts').innerText)
}
</script>

<style lang="scss" scoped>

</style>